<template>
  <view class="staff-item" >
    <view class="staff-logo" @tap="checkChange">
      <image class="img" :src="listData.url"></image>
      <!--  -->
    </view>
    <view class="staff-title" @tap="checkChange">
      <view class="name"
        >{{ listData.name
        }}<text v-if="listData.manage" class="manage">管理员</text></view
      >
      <!-- <view class="position">{{ listData.position }}</view> -->
    </view>
    <view class="staff-btn-box">
      <text class="btn agree" @tap="onAgree">赠送</text>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  listData: {
    type: Object,
  },
  manage: {
    type: [Number, String],
  },
});
const emits = defineEmits(["on-click", "check-change"]);

function onAgree() {
  emits("on-click",  props.listData);
}
function checkChange ()   {
  emits("check-change", props.listData);
};
</script>

<style lang="less" scoped>
@import url("@/static/style/global.less");

.staff-item {
  z-index: 1;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 83vw;
  margin: 20rpx 0;
  .staff-logo {
    width: 78rpx;
    height: 78rpx;
    border-radius: 50%;
    border: 1px solid #dadada;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .img {
      width: 100%;
      height: 100%;
    }
  }

  .staff-title {
    width: 390rpx;
    height: 78rpx;
    line-height: 78rpx;
    padding-left: 50rpx;
    .name {
      font-family: "ali";
      font-weight: bold;
      font-size: @font-size-31;
      color: @color-black;

      .manage {
        display: inline-block;
        width: 113rpx;
        height: 38rpx;
        line-height: 38rpx;
        margin: 0 10rpx;
        background: linear-gradient(
          90deg,
          #d0dbe6 0%,
          #e7eaf1 50%,
          #e4e8ef 100%
        );
        font-size: @font-size-20;
        color: @color-black;
        border-radius: 10rpx;
        text-align: center;
      }
    }

    .position {
      font-family: "ali";
      font-weight: 400;
      font-size: @font-size-23;
      color: @color-grey;
    }
    &.min {
      width: 430rpx;
    }
    &.apply {
      width: 280rpx;
    }
  }

  .staff-btn-box {
    display: flex;
    // padding-right: 40rpx;
    align-items: center;
    line-height: 80rpx;
    height: 80rpx;
    font-family: "ali";
    font-weight: 400;
    font-size: @font-size-31;
    text-align: center;
    .btn {
      margin: 0 20rpx;
      &.remove {
        color: @color-red;
      }

      &.agree {
        color: @color-green;
      }

      &.refuse {
        color: @color-orange;
      }

      &.join {
        color: @color-grey;
      }
    }
  }
}
</style>
